<template>
	<div id="app">
		<main>
			<div class="pic">
				<img :src="logo" alt="" />
			</div>
			<h2>Hello World</h2>
			<p>this is webpack5.x + vue3.x + React18.x project</p>
		</main>
		<footer>
			<div class="btn" @click="toPage('1')"><span>Vue PC-demo</span></div>
			<div class="btn" @click="toPage('2')"><span>Vue Mobile-demo</span></div>
			<div class="btn" @click="toPage('3')"><span>React demo</span></div>
		</footer>
	</div>
</template>

<script>
	export default {
		name: 'App',
		data() {
			return {
				logo: require('@/assets/img/vue-react-logo.jpg'),
			};
		},
		methods: {
			toPage(n) {
				if (n == 1) {
					window.location.href = '/admin/';
				}
				if (n == 2) {
					window.location.href = '/mall/';
				}
				if (n == 3) {
					window.location.href = '/news/';
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/assets/css/mixin';

	#app {
		height: 100vh;

		main {
			padding: 10% 0 0 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			.pic {
				img {
					width: 400px;
				}
			}

			h2 {
				text-align: center;
				font-size: 40px;
			}

			p {
				font-size: 18px;
				text-align: center;
				margin: 15px 0 0 0;
			}
		}

		footer {
			margin: 40px 0 0 0;
			display: flex;
			justify-content: center;

			.btn {
				margin: 0 20px;
				padding: 8px 15px;
				border: 1px solid #333;
				border-radius: 6px;
				cursor: pointer;
			}
		}
	}
</style>
